上一节我们学习了 Nuxt3 处理异常的各种方法，本讲我们将结合项目开发实践给大家介绍一些比较常用的配置项，为以后的项目开发做准备，本节涉及内容如下：

• 几种配置方式对比；
• 开发常用配置；
• 配置 Meta 信息。

# 几种配置方式对比

Nuxt 应用中有三种常见的配置方式：

• nuxt.config.ts：覆盖或扩展默认 Nuxt 配置；
• app.config.ts：配置公共变量；
• 外部配置文件：配置项目中其他方面。

# nuxt.config.ts

Nuxt 其实有一套默认配置，能够应付大部分需要。但是当我们需要覆盖或扩展默认 Nuxt 配置时，我们就可以在项目根目录下创建一个 nuxt.config.ts，它默认导出 defineNuxtConfig() 的执行结果，再和默认 nuxt 配置合并并最终生效，例如我们前面增加的模块配置：

arduino
复制代码export default defineNuxtConfig({
  modules: [
    "@nuxtjs/tailwindcss",
    "@pinia/nuxt",
    "@huntersofbook/naive-ui-nuxt",
  ],
});

我们会在后面演示一些开发中比较常见的配置方法。

# app.config.ts

如果需要配置一些项目需要的公共变量，可以在项目根目录创建 app.config.ts，这些变量是响应式的，不仅在运行时可以访问，还可以改变。例如下面的配置范例：

php
复制代码export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

实际上，nuxt.config.ts 中有个 appConfig 选项可以起到相同的作用。

访问 app.config.ts 中的变量：

ini
复制代码 const appConfig = useAppConfig()

# 范例：根据配置项设置黑暗模式

创建 ~/pages/config.vue，根据 app.config.ts 中的配置控制黑暗模式和标题。

ini
复制代码<template>
  <div :class="{ dark: appConfig.theme.dark }">
    <p
      class="bg-blue-300 dark:bg-slate-600 dark:text-slate-200"
      @click="appConfig.title = 'hello'"
    >
      appConfig: {{ appConfig.title }}
    </p>

    <label>
      dark mode:
      <NSwitch id="toggle" v-model:value="appConfig.theme.dark" />
    </label>
  </div>
</template>

<script setup lang="ts">
const